<template>
  <Card title="受访人员分布">
    <template #content>
      <div class="content" ref="chartContainer"></div>
    </template>
  </Card>
</template>
<script setup>
defineOptions({
  name: "RightCard1",
  inheritAttrs: false,
});
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

import { getCurrentInstance, onMounted, ref } from "vue";
const { proxy } = getCurrentInstance();

const chartContainer = ref(null);

function initEchart() {
  const chart = proxy.echarts.init(chartContainer.value);
  let colorList = ["#E21C0C", "#0DC6A3", "#0DB0ED"];
  let data = props.data.intervieweesGroupList;
  data.forEach((item, index) => {
    item.label = {
      color: colorList[index],
    };
  });
  // 公用调整
  let itemStyle = {
    normal: {
      borderColor: "#fff",
      borderWidth: 1,
      color: function (params) {
        return colorList[params.dataIndex];
      },
    },
  };
  let option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      y: "bottom",
      icon: "circle",
      data: data.map((item) => item.name),
    },
    series: [
      {
        // 数据
        type: "pie",
        zlevel: 3,
        radius: ["41%", "60%"],
        center: ["50%", "50%"],
        itemStyle: itemStyle,
        emphasis: {
          scale: true,
          label: {
            show: false,
          },
        },
        label: {
          show: false,
        },
        title: {
          show: true,
          color: "#fff",
          fontStyle: "normal",
          fontWeight: "normal",
          fontFamily: "微软雅黑",
          fontSize: 20,
        },
        data: data,
        label: {
          formatter: "{b} {c|{c}}",
          //   formatter: (params) => {
          //     // return params.name + `c|{${params.value}}`;
          //   },
          rich: {
            c: {
              color: "#1C1C1C",
            },
          },
          textStyle: {
            //   //图例文字的样式
            //   color: (name) => {
            //     return this.colorList[name];
            //   },
            rich: {
              a: {
                color: "#1C1C1C",
              },
            },
          },
          show: true,
        },
        labelLine: {
          length2: 10,
        },
      },
      {
        name: "阴影圈",
        type: "pie",
        radius: ["0", "54%"],
        center: ["50%", "50%"],
        hoverAnimation: false,
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: "rgba(255, 255, 255, 0.5)",
          },
        },
        zlevel: 4,
        labelLine: {
          show: false,
        },
        data: [100],
      },
    ],
  };
  chart.setOption(option);
  // 为窗口的resize事件绑定处理函数
  window.onresize = function () {
    // 让图表的宽高自适应容器的大小
    chart.resize();
  };
}

onMounted(() => {
  initEchart();
});
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
}
</style>
